<template>
    <!-- v-if="hot.length > 0" -->
	<view >
		<view>
			<view class="page-index magin-outo" >
				<u-input maxlength="30" class="inputi" type="type" v-model="keytext" placeholder="搜索我感兴趣的资源" :clearable="false" @confirm="keyupClick"/>
				<text @click="linkTo('/pagesVideo/pages/tuan/ss?keytext=' + keytext)">搜索</text>
				<view class="icon icon-search ioncse"></view>
			</view>
			<view class="try-lunb magin-outo">
				<u-swiper height="389" :list="banners" :autoplay="true" indicator-pos="bottomLeft" @click="clickSwiper" border-radius="0"></u-swiper>
			</view>
			<view class="try-bund magin-outo display-flex">
				<view class="try-1" @click="linkTo(item.link)" v-for="item in sonCategoryList" :key="item.id">
					<image :src="item.icon"></image> 
					<view>{{ item.text }}</view>
				</view>
			</view>
			
			<view class="try-rm magin-outo" v-for="(op, opInd) in otherVideoList" :key="opInd">
				<view class="display-flex try-2"  >
					<view class="btwenz" v-if="op.field === 'week_hot' ">
                        <text>本周</text><text class="strong">热门</text>
                        <image :src="op.icon"></image>
                    </view>
                    <view v-if="op.field !== 'week_hot' " class="btwenz">{{ op.text }}<image v-if="op.icon" :src="op.icon"></image></view>
					<view class="shuj" @click="linkTo(`/pagesVideo/pages/tuan/ss?type=${op.type}`)">
						<text>查看全部</text>
						<u-icon name="icon uicon-arrow-right" size="16" />
					</view>
				</view>
				<view class="display-flex" >
					<view class="try-3" v-for="(item, index) in op.children" :key="item.id" v-if="index <= 2" @click="detail(item.id, 0)">
						<image :src="item.image" mode="aspectFill"></image>
						<view>{{ item.title }}</view>
					</view>
				</view>
			</view>
			
			<view class="try-rm1 magin-outo">
				<view class="display-flex try-2">
					<view class="btwenz">推荐短剧</view>
				</view>
				<view class="display-flex"  style="flex-wrap: wrap; justify-content: space-between; width: 670rpx;margin: 0 auto;">
					<view class="try-3" style="margin-bottom: 25rpx;" v-for="(item, index) in listData" :key="index"  @click="detail(item.id, 0)">
						<image :src="item.image" mode="aspectFill"></image>
						<view>{{ item.title }}</view>
					</view>
				</view>
				<uni-load-more :status="status"  :content-text="contentText" />
			</view>
			
			<u-back-top :scroll-top="scrollTop"></u-back-top>
		</view>
		
        <tabbar key="shart_video" class="shart_video-tabbar" />
		<!-- <tabbar :_current="2" :getCartNum="0"></tabbar> -->
	</view>
</template>

<script>
	// import tabbar from '@/pages/shop/tabbar';
	// import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
    import { apiGetAdList, apiGetShartVideoList, apiGetShartVideoOtherLists, apiGetShartVideoSonCategoryList} from "@/api/shart_video.js"
	export default {
		components: {
			// tabbar,
			// uniLoadMore
		},
		
		data() {
			return {
                sonCategoryList: [],
				banners: [],
                otherVideoList: [
                    {
                        type: 3,
                        text: '本周热门',
                        field: 'week_hot',
                        icon: '/static/img/Home/rmhh.png',
                        children: [],
                    },
                    {
                        type: 3,
                        text: '排行榜',
                        field: 'ranking_board',
                        icon: '/static/img/Home/rmhh.png',
                        children: [],
                    },
                    {
                        type: 2,
                        text: '最新上线',
                        field: 'new',
                        icon: '',
                        children: [],
                    }
                ],
				mbgColor: '#ffffff', //this.$mbgColor
				keytext: '',
				scrollTop: 0,
				listData: [],
				reload: true,
                paginationData: {
                    page_size: 4,
                    page_no: 1,
                },
				status: 'more',
				contentText: {
					contentdown: '上拉加载更多',
					contentrefresh: '加载中',
					contentnomore: '没有更多数据了',
                    
				}
			}
		},
        onLoad() {
            this.getJsonData();
        },
        onShow() {
        	
        },
		
		onHide(){
			
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		onReachBottom() {
			// this.status = 'more';
			this.getlist2();
		},
		methods: {
			// 输入框回车事件
			keyupClick(e){
				uni.navigateTo({
					url:'/pagesVideo/pages/tuan/ss?keytext='+ e
				})
			},
            
            getJsonData() {
                this.getShartVideoSonCategoryList()
                this.getOtherList();
                this.getAdList()
            },
            /**
             * 获取到数据后，需要把他缓存起来。已经在apiGetAdList中做了缓存。
             */
            getAdList() {
                const vm = this
                apiGetAdList().then((res) => {
                    console.log("res")
                    const { lists } = res
                    vm.banners = lists
                })
            },
            
            getShartVideoSonCategoryList() {
                // 获取子分类，追剧，最新，排行 ，免费，
                // 目前的接口，只返回了数据，没有返回他的图标，不太适合
                // return
                apiGetShartVideoSonCategoryList().then((res) => {
                    const { lists } = res
                    this.sonCategoryList = lists
                })
            },
            /**
             * 获取 推荐短剧 的数据
             */
            getlist2() {
                const vm = this
                var limit = 2;
                let data = {
                    // return_type: 0,
                    ...this.paginationData
                };
               
                if (vm.status === 'loading' || vm.status === 'noMore') {
                    return
                }
                vm.status = 'loading';
                apiGetShartVideoList(data).then(res=>{
                	if (res.count > 0) {
                		let list = res.lists;
                		vm.listData = vm.listData.concat(list);
                        vm.paginationData.page_no =  vm.paginationData.page_no + 1
                		if (res.count > vm.listData.length) {
                			vm.status = 'more';
                		} else {
                            vm.status = 'noMore';
                        }
                	} else {
                		vm.listData = [];
                		vm.contentText.contentdown = '暂无数据'
                		vm.status = 'noMore'
                	}
                })
            },
			
            /**
             * 獲取數據，获取的是 排行榜 本周热门，最新上线的数据
             */
			getOtherList() {
				const vm = this
				apiGetShartVideoOtherLists().then(res => {
                    vm.otherVideoList.forEach(item => {
                        item.children = res[item.field] || []
                    })
					vm.getlist2();
				})
			},
           
			clickSwiper(index) {
				if(this.banners[index]['link'] != '') {
					uni.redirectTo({
						url: this.banners[index]['link']
					});
				}
			},
			linkTo(link) {
				uni.navigateTo({
					url: link
				})
			},
			detail(vid, mid) {
				var fxpid = 1
				if (uni.getStorageSync("userinfo")) {
					fxpid = uni.getStorageSync("userinfo").id
				}
				uni.navigateTo({
					url: '/pagesVideo/pages/tuan/detail?vid=' + vid + '&mid=' + mid + '&fxpid=' + fxpid
				})
			},
		}
	}
</script>

<style lang="scss">
	.display-flex{
		display: flex;
	}
	.magin-outo{
		margin: 0 auto;
	}
	.try-rm1{
		width: 730rpx;
		border-radius: 10rpx;
		padding: 35rpx 20rpx 0 20rpx;
		margin: 0 auto;
		margin-bottom: 20rpx;
		
		.try-3{
			width: 320rpx;
			
			image{
				width: 320rpx;
				height: 370rpx;
				border-radius: 20rpx;
			}
			view{
				font-weight: bold;
				color: #000000;
				font-size: 30rpx;
				margin-top: 8rpx;
				width: 320rpx;
				text-align: center;
				white-space:nowrap;
				overflow:hidden;
				text-overflow:ellipsis;
			}
		}
		.try-2{
			justify-content: space-between;
			margin-bottom: 30rpx;
			.btwenz{
				font-weight: bold;
				font-size: 27rpx;
				color: #000000;
				.strong{
					color: #F76E00 !important;
					
				}
				image{
					width: 26rpx;
					height: 29rpx;
					margin-top: -6rpx;
					margin-left: 8rpx;
				}
			}
			.shuj{
				font-weight: 400;
				font-size: 22rpx;
				color: #666666;
				text{
					margin-right: 10rpx;
				}
			}
		}
	}
	.try-rm{
		width: 730rpx;
		height: 447rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		padding: 35rpx 20rpx 0 20rpx;
		margin-bottom: 20rpx;
		.try-3{
			width: 230rpx;
			image{
				width: 210rpx;
				height: 270rpx;
				border-radius: 20rpx;
			}
			view{
				font-weight: bold;
				color: #000000;
				font-size: 30rpx;
				margin-top: 8rpx;
				width: 210rpx;
				text-align: center;
				white-space:nowrap;
				overflow:hidden;
				text-overflow:ellipsis;
			}
		}
		.try-2{
			justify-content: space-between;
			margin-bottom: 30rpx;
			.btwenz{
				font-weight: bold;
				font-size: 27rpx;
				color: #000000;
				.strong{
					color: #F76E00 !important;
					
				}
				image{
					width: 26rpx;
					height: 29rpx;
					margin-top: -6rpx;
					margin-left: 8rpx;
				}
			}
			.shuj{
				font-weight: 400;
				font-size: 22rpx;
				color: #666666;
				text{
					margin-right: 10rpx;
				}
			}
		}
	}
	
	.page-index {
		width: 100%;
		position: relative;
		padding-top: 26rpx;
		margin-bottom: 20rpx;
		.inputi {
			width: 95%;
			height: 62rpx;
			background: #FFFFFF;
			border-radius: 10rpx;
			padding-left: 68rpx !important;
			// padding-right: 132rpx !important;
			margin: 0 auto;
		}
	
		text {
			width: 90rpx;
			height: 28rpx;
			font-weight: 400;
			font-size: 26rpx;
			color: #666666;
			display: inline-block;
			text-align: center;
			position: absolute;
			line-height: 32rpx;
			right: 5%;
			top: 36rpx;
			border-left: 1rpx solid #666;
			margin-top: 10rpx;
			
		}
		.ioncse {
			position: absolute;
			top: 42rpx;
			margin-left: 5%;
		}
	}
	
	.try-lunb{
		height: 389rpx;
	}
	.try-bund{
		width: 730rpx;
		height: 164rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		margin-top: 19rpx;
		padding-top: 18rpx;
		padding-left: 10rpx;
		padding-right: 10rpx;
		margin-bottom: 20rpx;
		.try-1{
			margin: 0 46rpx 0 30rpx;
			flex: 1;
			image{
				width: 100rpx;
				height: 100rpx;
			}
			view{
				font-size: 22rpx;
				text-align: center;
			}
		}
	}
	
</style>